<template>
  <div>
    <div style="width: 130rem;margin-left: 3.5rem;">
      <el-row :gutter="22">
        <el-col :span="10" style="width: 55rem;">
          <div class="grid-content bg-purple">
            <div>
              <el-breadcrumb style="margin-top: 0.375rem;margin-bottom: 0.375rem;" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"><span class="homespan">首页</span></el-breadcrumb-item>
                <el-breadcrumb-item :to="{path:'/course'}"><span class="homespan">课程</span></el-breadcrumb-item>
                <el-breadcrumb-item>{{this.courseinfo.coursetitle}}</el-breadcrumb-item>
              </el-breadcrumb>
              <img class="topcourseimg" height="290" width="510" :src="this.courseinfo.cover" />
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="width: 77.2rem;">
          <div class="grid-content bg-purple">
            <div>
              <div>
                <h3 style="font-weight: bolder;">{{this.courseinfo.coursetitle}}</h3>
              </div>
              <div style="background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%);border-radius:0.625rem 0.625rem 0 0 ;color: white;">
                <el-avatar :src="this.courseinfo.avatar"></el-avatar>
                <span>{{this.courseinfo.teachername}}</span>
                <span>{{this.courseinfo.teachercareer}}</span>
                <span>{{this.courseinfo.teacherintro}}</span>
                <span>联系方式</span>
                <span style="float: right;margin-right: 0.375rem;">
                  <i style="color: orange;background-color;" class="el-icon-star-on"></i>
                  <i style="color: orange;background-color;" class="el-icon-star-off"></i>
                  <el-button size="medium" type="text" style="color: white;"><span style="font-size: 0.175rem;">收藏</span></el-button>
                </span>
              </div>
              <div style="background-color: #F2F2F2;height: 14rem;border-radius: 0.625rem;">
                <div>
                  <span style="padding-left: 2rem;">课程数 {{this.courseinfo.lessonnum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>学习人数  444</span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>收藏人数</span>
                  <span style="float: right;padding-right: 0.375rem;">
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                  </span>
                </div>


                <span v-if="this.courseinfo.starttime" style="padding-left: 2rem;">开课时间： {{this.courseinfo.starttime}} ~ {{this.courseinfo.endtime}}</span>
              </div>
              <div  style="margin-top: 1.875rem;">
                 <el-button v-if="this.uiCourseStartVo==null" @click="startlearn" style="font-weight: bolder;" type="success" round>立即报名</el-button>
              </div>
             <!-- <div style="margin-top: 1.875rem;">
                 <el-button  @click="startlearn" v-if="this.loginInfo!=null" style="font-weight: bolder;" type="success" disabled="true" round>立即报名</el-button>
              </div> -->
            </div>
          </div>
        </el-col>

      </el-row>
    </div>
    <div class="menux">
      <el-tabs class="menu1" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="章节" name="first">
            <div style="width: 130rem;margin-left: auto;margin-right: auto;">
              <!-- 课程信息 左边 -->
              <div style="width: 90rem;height: 100%;float: left;">
                <!-- 课程公告 -->
                <div style="background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);border-radius: 0.625rem;">
                  <marquee width=900 scrollamount=6><span style="color: coral;">课程公告:</span>弹来弹去跑马灯!</marquee>
                </div>
                <!-- 课程简介 -->
                <div style="margin-top: 0.625rem;background-color: #CCCCCC;border-radius: 0.25rem;padding: 0.25rem;">
                  课程简介：<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <div v-html="this.courseinfo.description">
                    {{this.courseinfo.description}}
                  </div>
                </div>
                <!-- 课程章节 -->
                <div v-for="chapter in chapterVotypeList" style="background-color: #F2F2F2;border-radius: 0.25rem;">
                  <h5  style="font-weight: bolder;padding-top: 0.25rem;">&nbsp;{{chapter.title}}</h5>
                  <span style="font-size: 10px;">&nbsp;本章中会介绍学习内容，演示项目效果，梳理课程中使用到的工具，软件，以及本课涵盖的技术栈、重难点。</span><br>
                  <!-- 课程的小节 -->
                  <div v-for="video in chapter.videoVotypeList" class="el-icon-video-camera-solid1" style="width: 96%;">
                    <!-- <el-button size="small" style="color: #475669;padding-left: 0.375rem;" type="text"><i class="el-icon-video-camera-solid"></i><span class="video"><a class="videox" :disabled="true" :href="video.videourl" target="_blank">视频: {{video.title}}</a></span></el-button> -->
                    <el-button @click="playvideo(video.videourl)" size="small" style="color: #475669;padding-left: 0.375rem;" type="text"><i class="el-icon-video-camera-solid"></i><span class="video">视频: {{video.title}}</span></el-button>
                  <el-progress color="#67C23A" style="float:right;padding-top: 0.775rem;padding-right: 0.625rem;" :show-text="false" width="10" stroke-width="1" type="circle" :percentage="25"></el-progress>
                  </div>
                </div>
              </div>

              <!-- 学习进度 学习资料  右边 -->
              <div style="width: 40rem;float: left;">
                <div style="width: 96%;float: right; auto;border-radius: 0.25rem;background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);">
                  <!-- 学习进度 -->
                  <div style="width: 96%;margin-right: auto;margin-left: auto;">
                    <span style="padding-left: 1.375rem;font-weight: bolder;float: left;">已学10%</span>
                    <span style="padding-right: 1.375rem;font-weight: normal;float: right;">学习耗时3分钟</span>
                    <el-progress  :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
                    <span style="color: #7F828B;font-size: 0.6875rem;">上次学习到第一章 第一节  Java的初次认识</span>
                  </div>
                  <!-- 课程须知 -->
                  <div style="padding: 0.375rem;">
                    <h6 style="font-weight: bolder;">课程须知</h6>
                    <span>学习中需要用到这些工具</span>
                    <p>
                      —Linux
                      —IDEA
                      —Hadoop
                      —MySQL
                      —Sqoop
                      —Echarts(图表展示)
                    </p>
                    <span>你需要有这些基础：</span>
                    <p>
                      —熟悉Java语言和IDEA开发工具
                      —有一定的Linux基础和Shell编程基础
                      —有一定的MySQL基础
                    </p>
                    <h6 style="font-weight: bolder;">本课程能学到什么？</h6>
                      <p>
                        1、Hadoop3.0集群安装部署
                      </p>
                      <p>
                        2、Hadoop三大核心组件(HDFS+MapReduce+Yarn)的核心原理和使用
                      </p>
                      <p>
                        3、使用Hadoop进行海量数据存储和分析
                      </p>

                  </div>

                </div>
                <!-- 课程资源 -->
                <div style="width: 96%;float: right; auto;border-radius: 0.25rem;background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);margin-top: 0.375rem;">
                  <!-- 课程须知 -->
                  <div style="padding: 0.375rem;">
                    <h6 style="font-weight: bolder;">课程相关资源</h6>
                    <div v-for="i in 12">
                      <span>idea 2020</span>
                      <span class="sourceloading" style="float: right;">下载</span>
                    </div>
                    <div>
                      <span>idea 2020</span>
                      <span class="sourceloading" style="float: right;">下载</span>
                    </div>
                    <div>
                      <span>idea 2020</span>
                      <span class="sourceloading" style="float: right;">下载</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="问答" name="second">配置管理</el-tab-pane>
          <el-tab-pane>
            <span slot="label">
              评论
              <el-badge :value="total" :max="99" class="item">
                <!-- <el-button style="color: #000000;" type="text" size="small">评论</el-button> -->

              </el-badge>

            </span>
            <div style="width: 130rem;margin-left: auto;margin-right: auto;">
              <!-- 课程信息 左边 -->
              <div style="width: 90rem;height: 100%;float: left;">
                <!-- 评分统计 -->
                <div style="margin-top: 0.625rem;background-color: #F2F2F2;border-radius: 0.25rem;padding: 0.25rem;height: 5rem;">
                  <!-- 综合评分 -->
                  <div style="height: 100%;width: 40%;float: left;margin-left: 10%;">
                    <div style="color: #7F828B;margin-top: 0.6rem;">
                      综合评分
                    </div>
                    <el-rate
                      v-model="valuezonghe"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                  </div>
                  <div style="height: 100%;width: 20%;float: left;">
                    <div style="color: #7F828B;margin-top: 0.6rem;">
                      问答评分
                    </div>
                    <el-rate
                      v-model="valuezonghe"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                  </div>
                  <div style="height: 100%;width: 20%;float: left;">
                    <div style="color: #7F828B;margin-top: 0.6rem;">
                      逻辑评分
                    </div>
                    <el-rate
                      v-model="valuezonghe"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                  </div>

                </div>
                <!-- 课程章节 -->
                <div v-for="comment in eduComments" style="border-radius: 0.25rem;margin-top: 0.875rem;background-color: #CDDCDC;box-shadow: #7F828B 0.625rem 0.625rem 0.625rem;">
                  <div style="height: 5rem;">
                    <div style="width: 6%;float: left;margin-top: 0.3875rem;margin-left: 0.3875rem;">
                      <img style="width: 4rem;height: 4rem;border-radius: 100%;" :src="comment.avatar" />
                    </div>
                    <div style="width: 16%;float: left;">
                      <h6 style="font-size: 0.6875rem;font-weight: bolder;color: #7F828B;">{{comment.nickname}}</h6>

                    </div>
                    <div style="width: 17%;float: left;margin-left: 42%;">
                      <div style="color: #7F828B;margin-top: 0.6rem;">
                        问答评分
                      </div>
                      <el-rate
                        v-model="comment.startsquesion"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                      </el-rate>

                    </div>
                    <div style="width: 17%;float: left;">
                     <div style="color: #7F828B;margin-top: 0.6rem;">
                       逻辑评分
                     </div>
                     <el-rate
                       v-model="comment.startslogic"
                       disabled
                       show-score
                       text-color="#ff9900"
                       score-template="{value}">
                     </el-rate>

                    </div>
                  </div>
                  <div style="padding-left: 0.55rem;padding-right: 0.55rem;" v-html="comment.content">
                    {{comment.content}}
                  </div>
                  <div style="width: 100%;">

                    <span style="margin-left: 78%;font-size: 0.6875rem;color: #AAAAAA;"><el-button @click="deletecommentzongt(comment.id)" v-if="comment.memberId===uid" size="mini"  type="text" style="color: #7F828B;">删除</el-button>&nbsp;
                    &nbsp;&nbsp;&nbsp;
                    时间：{{comment.gmtCreate}}</span>


                  </div>
                </div>
                <div v-if="this.loginInfo!=null && this.uiCourseStartVo!=null" style="margin-top: 1.375rem;">
                  问答评分
                  <el-rate v-model="eduComment.startsquesion"></el-rate>
                  逻辑评分
                  <el-rate v-model="eduComment.startslogic"></el-rate>
                    <client-only>
                      <vue-editor v-model="eduComment.content"></vue-editor>
                    </client-only>
                    <el-button @click="submincomment" style="margin-top: 0.5rem;" type="success">发布</el-button>
                    <el-button @click="editorrest" style="margin-top: 0.5rem;" type="success">重置</el-button>
                </div>
                <div v-if="total>10" class="pager-box">
                  <el-pagination
                    class="page"
                    background
                    layout="total,prev, pager, next"
                    prev-text="上一页"
                    next-text="下一页"
                    :page-size="10"
                    :current-page="current"
                    @current-change="handleCurrentChange"
                    :total="total">
                  </el-pagination>
                </div>
              </div>

              <!-- 学习进度 学习资料  右边 -->
              <div style="width: 40rem;float: left;">
                <div style="width: 96%;float: right; auto;border-radius: 0.25rem;background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);">
                  <!-- 学习进度 -->
                  <div style="width: 96%;margin-right: auto;margin-left: auto;">
                    <span style="padding-left: 1.375rem;font-weight: bolder;float: left;">已学10%</span>
                    <span style="padding-right: 1.375rem;font-weight: normal;float: right;">学习耗时3分钟</span>
                    <el-progress  :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
                    <span style="color: #7F828B;font-size: 0.6875rem;">上次学习到第一章 第一节  Java的初次认识</span>
                  </div>
                  <!-- 课程须知 -->
                  <div style="padding: 0.375rem;">
                    <h6 style="font-weight: bolder;">课程须知</h6>
                    <span>学习中需要用到这些工具</span>
                    <p>
                      —Linux
                      —IDEA
                      —Hadoop
                      —MySQL
                      —Sqoop
                      —Echarts(图表展示)
                    </p>
                    <span>你需要有这些基础：</span>
                    <p>
                      —熟悉Java语言和IDEA开发工具
                      —有一定的Linux基础和Shell编程基础
                      —有一定的MySQL基础
                    </p>
                    <h6 style="font-weight: bolder;">本课程能学到什么？</h6>
                      <p>
                        1、Hadoop3.0集群安装部署
                      </p>
                      <p>
                        2、Hadoop三大核心组件(HDFS+MapReduce+Yarn)的核心原理和使用
                      </p>
                      <p>
                        3、使用Hadoop进行海量数据存储和分析
                      </p>

                  </div>

                </div>
                <!-- 课程资源 -->
                <div style="width: 96%;float: right; auto;border-radius: 0.25rem;background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);margin-top: 0.375rem;">
                  <!-- 课程须知 -->
                  <div style="padding: 0.375rem;">
                    <h6 style="font-weight: bolder;">课程相关资源</h6>
                    <div v-for="i in 12">
                      <span>idea 2020</span>
                      <span class="sourceloading" style="float: right;">下载</span>
                    </div>
                    <div>
                      <span>idea 2020</span>
                      <span class="sourceloading" style="float: right;">下载</span>
                    </div>
                    <div>
                      <span>idea 2020</span>
                      <span class="sourceloading" style="float: right;">下载</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="笔记" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
    </div>

    这是课程的详情页面
    课程的id是：{{this.courseid}}
    测试其他的数据cc:{{this.cc}}
  </div>
</template>

<script>
  import course from '@/api/edu/course/course'
  import cookie from 'js-cookie'
  // import { VueEditor } from "vue2-editor"
  export default {
    // components: {
    //         VueEditor
    //     },
    data() {
      return {
        courseid: '',
        cc: '',
        value: 3.7,
        valuezonghe: 3.8,
        activeName: 'first',
        chapterVotypeList: [],
        courseinfo: {},
        uiCourseStartVo: null,
        loginInfo: null,
        current: 1,
        total: 0,
        eduComments: {},
        uid: '',
        content: '',
        eduComment:{
          courseId: '',
          teacherId: '',
          memberId: '',
          nickname: '',
          avatar: '',
          startslogic: 0,
          startsquesion: 0,
          content: ''
        }
      }
    },
    created() {
      this.courseid = this.$route.params.courseid
      this.getinfo(this.courseid)
      // this.cc = this.$route.params.cc
      // console.log('测试路由传递其他数据：', this.cc)
      // console.log('测试登录信息存在情况:',cookie.get("uicenterMember"))
      this.getuserid()
      // console.log('测试登录信息存在情况ss:',this.loginInfo)
      // this.loginInfo=JSON.parse(cookie.get("uicenterMember"))
      this.handleCurrentChange(1)
    },
    methods: {
      //删除课程的总体评论
      deletecommentzongt(id){
        course.deletecommentzt(id).then(response => {
          if(response.data.data.a==true){
            this.handleCurrentChange(1)
            this.$message({
              type: 'success',
              message: '删除评论成功'
            })
          }else{
            this.$message({
              type: 'error',
              message: '您没有权限'
            })
          }
        })
      },
      //评论富文本框重置
      editorrest(){
        this.eduComment.courseId=''
        this.eduComment.teacherId=''
        this.eduComment.memberId=''
        this.eduComment.nickname=''
        this.eduComment.avatar=''
        this.eduComment.startslogic=0
        this.eduComment.startsquesion=0
        this.eduComment.content=''
      },
      //提交评论
      submincomment(){
        if(this.eduComment.content!=''){
          this.eduComment.courseId=this.courseid
          this.eduComment.teacherId=this.courseinfo.teacherid
          this.eduComment.memberId=this.loginInfo.id
          this.eduComment.nickname=this.loginInfo.nickname
          this.eduComment.avatar=this.loginInfo.avatar
          course.submitcommentx(this.eduComment).then(response => {
            if(response.data.data.a==true){
              this.handleCurrentChange(1)
            }else{
              this.$message({
                type: 'error',
                message: '评论发布失败'
              })
            }
            this.eduComment.courseId=''
            this.eduComment.teacherId=''
            this.eduComment.memberId=''
            this.eduComment.nickname=''
            this.eduComment.avatar=''
            this.eduComment.startslogic=0
            this.eduComment.startsquesion=0
            this.eduComment.content=''
          })
        }else{
          this.eduComment.courseId=''
          this.eduComment.teacherId=''
          this.eduComment.memberId=''
          this.eduComment.nickname=''
          this.eduComment.avatar=''
          this.eduComment.startslogic=0
          this.eduComment.startsquesion=0
          this.eduComment.content=''
          this.$message({
            type: 'error',
            message: '请输入评论内容'
          })
        }
      },
      //分页获取评论的内容
      getcommnets(){
        this.handleCurrentChange(1)
        console.log('测试评论的分页：',this.eduComments)
      },
      handleCurrentChange(page){
        course.getcommentinfobyid(page,10,this.courseid).then(response => {
          this.total=response.data.data.commentpage.total
          this.current=response.data.data.commentpage.current
          this.eduComments=response.data.data.commentpage.eduComments
          console.log('测试评论的分页：',this.eduComments)
        })
        // teacher.getteacherPG(page,10).then(response =>{
        //   this.data=response.data.data.teachermap
        // })
      },
      //页面跳转  播放视频
      playvideo(url){
        // let newtarg=this.$router.resolve({
        //   path: url,
        // })
        if(this.loginInfo!=null){
          if(this.uiCourseStartVo!=null){
            window.open(url, '_blank');
          }else{
            this.$message({
              type: 'error',
              message: '您还未报名！'
            })
          }
        }else{
          this.$message({
            type: 'error',
            message: '未登录！'
          })
        }
      },
      //报名课程

      startlearn(){
        if(this.loginInfo!=null && this.courseid.length>0){
          course.intocourse(this.loginInfo.id,this.courseid).then(response => {
            if(response.data.data.isstart){
              this.getstartedlearn(this.loginInfo.id,this.courseid)
              this.$notify({
                        title: '报名信息',
                        message: '恭喜您已成功报名课程！',
                        position: 'bottom-right'
                      });
            }
          })
        }else{
          this.$message({
            type: 'error',
            message: '未登录！'
          })
        }

      },
      //获取用户id
      getuserid(){
        if(cookie.get("uicenterMember")){
          // console.log('测试登录信息存在情况:',cookie.get("uicenterMember"))
          this.loginInfo=JSON.parse(cookie.get("uicenterMember"))
          this.uid=this.loginInfo.id
          console.log('测试登录信息存在情况1:',this.loginInfo)
          // if(this.loginInfo!=null){
            this.getstartedlearn(this.loginInfo.id,this.courseid)
          // }
        }else{
         console.log('还没有登录')
         this.loginInfo=null
         this.uid=''
        }
      },
      //获取已报名情况
      getstartedlearn(userid,courseid){
        course.getisstartcourse(userid,courseid).then(response => {
          this.uiCourseStartVo=response.data.data.uiCourseStartVo
          console.log('测试返回的是否报名的信息xxx：',this.uiCourseStartVo)
        })
      },
      // 获取详情页课程-讲师-简介-章节信息
      getinfo(courseid){
        course.getcourseinfo(courseid).then(response => {
          this.courseinfo=response.data.data.coursemap.courseinfo
          this.chapterVotypeList=response.data.data.coursemap.chapterVotypeList
        })
      }
    }
  }
</script>

<style>
  .videox{
    color: #475669;
  }
  .videox:hover{
    color: crimson;
    text-decoration: none;
  }
  .video:hover{
    color: crimson;
  }
  .sourceloading:hover{
    color: #7FFF00;
  }
  .el-icon-video-camera-solid1:hover{
   background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
   border-radius: 0.225rem;
  }
  .menux{
    margin-top: 0.25rem;
  }
  .menux .el-tabs__item{
            width: 70px;
            height: 40px;
            padding: 0;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            color: #FFE8A9;
            /* border-radius: 40px; */
          }
  .menux .el-tabs__header {
  color: #47494E;
  margin-left: auto;
  margin-right: auto;
  width: 96%;
}
  .menux .el-tabs__nav .el-tabs__item{
    font-size: 15px;
    color: #47494E;
  }
  .menux .el-tabs__active-bar{
            display: none;
   }
   .menux .el-tabs__item.is-active{
            color: #ffffff;
            background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);
            text-align: center;
          }

  .menuitem{
  }
  .menu1{

  }
  .topcourseimg {
    background-repeat: round;
    border-radius: 0.85rem;
  }

  /* 背景 */
  .topcard {
    height: 30rem;
    width: 96%;
    margin-left: 3%;
  }

  .homespan:hover {
    color: chartreuse;
  }

  .page{
    text-align: center;
    margin-top: 1.25rem;
   }
  /*带背景的分页按钮背景色begin*/
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #08C0B9;
    color: #FFF;
  }
  .el-pagination.is-background .el-pager li.active {
    color: #fff;
    cursor: default;
  }
  .el-pagination.is-background .el-pager li:hover {
    color: #08C0B9;
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #08C0B9;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: #08C0B9;
    color: #FFF;
  }
  /*带背景的分页按钮背景色end*/


  /*不带背景的分页按钮背景色begin*/
  .el-pager li.active {
    color: #08C0B9;
    cursor: default;
  }
  .el-pagination .el-pager li:hover {
    color: #08C0B9;
  }
  .el-pagination .el-pager li:not(.disabled):hover {
    color: #08C0B9;
  }
</style>
